import {
  list as wxPageList, find
} from '../../../../api/wxPage'
const util = require('../../../../utils/util')
import {
  list as productList
} from '../../../../api/product'
let app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    info: {
      type: Object,
    }
  },
  lifetimes: {
    attached() {
      if (this.data.info.tagids != null) {
        this.data.pageId = this.data.info.linkId
        this.data.tagIds = this.data.info.tagids.split(',')
        for (var i = 0; i < this.data.tagIds.length; i++) {
          this.data.tagIds[i] = parseInt(this.data.tagIds[i])
        }
      }
      this.setData({
        tagIds: this.data.tagIds,
        pageId: this.data.info.linkId,
        info: this.data.info
      })
      if (this.data.info.rows > 3) this.data.pageSize = this.data.info.rows;
      this.loadPage()
      this.loadProduct()
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    title: '',
    info: {},
    products: [],
    pageList: {},
    pageId: '',
    tagIds: [],
    haveThumbnial: false,
    color: '#000',
    backgroundColor:'',
    pageSize:20
  },
  /**
   * 组件的方法列表
   */

  methods: {
    loadProduct() {
      const that = this
      if (this.data.tagIds.length > 0) {
        productList({
          mchId: app.globalData.mchId,
          tagIds: this.data.tagIds,
          pageSize:this.data.pageSize
        }).then(res => {
          res.data.data.forEach((item, index) => {
            item.thumbnail = util.thumbnail(item.thumbnail, 300, 300)
            if (index == 1) {
              wx.getImageInfo({
                src: item.thumbnail,
                success: rect => {
                  that.setData({
                    width: rect.width,
                    height: rect.height
                  })
                },
              })
            }
          })
          that.data.products = res.data.data
          that.setData({
            products: that.data.products
          })
        })
      }
    },

    topage(e) {
      wx.navigateTo({
        url: '/pages/index/wxPage/wxPage?id=' + e.currentTarget.dataset.id
      })

    },
    toLink(e) {
      wx.navigateTo({
        url: '/pages/goods/product/details?id=' + e.currentTarget.dataset.id,
      })
    },
    loadPage() {
      const _this = this;
      wxPageList({ mchId: app.globalData.mchId }).then(res => {
        res.data.data.forEach(item => {
          if (item.id == _this.data.pageId) {
            if (!util.isNull(item.thumbnial)) {
              item.thumbnial = util.thumbnail_cover(item.thumbnial, 750)
              _this.data.pageList = item
              _this.data.haveThumbnial = true
            } else {
              _this.data.pageList = item
              _this.data.color =  item.backgroundColor !='' ? _this.dynamicColor(item.backgroundColor) : ''
              _this.data.backgroundColor = item.backgroundColor != '' ? `linear-gradient(180deg,${item.backgroundColor}, rgba(240, 240, 240, 1))` : '#fff'
              _this.data.haveThumbnial = false
            }
          }
        })
        console.log(_this.data);
        _this.setData({
          pageList: _this.data.pageList,
          color: _this.data.color,
          backgroundColor: _this.data.backgroundColor,
          haveThumbnial: _this.data.haveThumbnial,
        })
      })
    },
    dynamicColor(val) {
      // 16进制颜色值的正则
      let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
      // 把颜色值变成小写
      let color = val.toLowerCase()
      let result = ''
      if (reg.test(color)) {
        // 如果只有三位的值，需变成六位，如：#fff => #ffffff
        if (color.length === 4) {
          let colorNew = "#"
          for (let i = 1; i < 4; i += 1) {
            colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
          }
          color = colorNew
        }
        // 处理六位的颜色值，转为RGB
        let colorChange = []
        for (let i = 1; i < 7; i += 2) {
          colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
        }
        let grayLevel = colorChange[0] * 0.299 + colorChange[1] * 0.587 + colorChange[2] * 0.114
        if (grayLevel >= 192) {
          //浅色模式
          return '#000'
        } else {
          return '#fff'
        }
      } else {
        result = '无效';
        return { rgb: result }
      }
    }
  },

})
